<!doctype html>
<!--
/**
 * jsPDF Context2d PlugIn
 * Copyright (c) 2014 Steven Spungin (TwelveTone LLC)  steven@twelvetone.tv
 *
 * Licensed under the MIT License.
 * http://opensource.org/licenses/mit-license
 */
-->

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Context2D Test</title>


</head>

<body style='background-color: silver; margin: 0;'>

  <script src="../../dist/jspdf.min.js"></script>
  <script src="../../examples/js/test_harness.js"></script>

  <script>


      var pdf = new jsPDF('p', 'pt', 'letter');
      var ctx = pdf.context2d;

      var y = 0;
      var h = 20
      var pad = 10;
      var textHeight = 20;
      ctx.setFont("20pt times");

      // Text and Fonts
      ctx.save();
      ctx.fillText("Testing fillText, strokeText, and setFont", 20, y + textHeight);
      y += textHeight + pad;

      ctx.setFont("10pt times");
      ctx.fillText("Hello PDF", 20, y + textHeight);
      y += textHeight + pad;

      ctx.setFont("10pt courier");
      ctx.fillText("Hello PDF", 20, y + textHeight);
      y += textHeight + pad;

      ctx.setFont("10pt courier bold");
      ctx.fillText("Hello Bold PDF", 20, y + textHeight);
      y += textHeight + pad;

      ctx.setFont("10pt courier italic");
      ctx.fillText("Hello Italic PDF", 20, y + textHeight);
      y += textHeight + pad;

      ctx.setFont("50pt courier bold");
      ctx.fillText("Hello PDF", 20, y + 50);
      y += 50 + pad;

      ctx.setFont("50pt courier bold");
      ctx.strokeText("Hello PDF", 20, y + 50);
      y += 50 + pad;

      ctx.setFont("20pt courier bold");
      ctx.strokeText("Hello PDF", 20, y + 20);
      y += 20 + pad;

      ctx.setFont("20pt courier bold");
      ctx.fillText("Hello PDF", 20, y + 20);
      y += 20 + pad;

      ctx.restore();

      // CSS Color Names
      ctx.save();
      ctx.fillText("Testing CSS color names", 20, y + textHeight);
      y += textHeight + pad;

      ctx.setFillStyle('red');
      ctx.fillText("Red", 20, y + textHeight);
      y += textHeight + pad;

      ctx.setFillStyle('green');
      ctx.fillText("Green", 20, y + textHeight);
      y += textHeight + pad;

      ctx.setStrokeStyle('blue');
      ctx.strokeText("Blue", 20, y + textHeight);
      y += textHeight + pad;
      ctx.restore();

      //
      // Text baseline
      //
      ctx.save();
      ctx.fillText("Testing textBaseline", 20, y + textHeight);
      y += textHeight + pad + 30;

      ctx.setStrokeStyle('#dddddd');
      ctx.setFont("20pt times");

      ctx.moveTo(20,y);
      ctx.lineTo(150, y);
      ctx.stroke();
      ctx.setTextBaseline('alphabetic');
      ctx.fillText("Alphabetic Q", 20, y);
      y += 40 + pad;

        ctx.moveTo(20,y);
      ctx.lineTo(150, y);
      ctx.stroke();
      ctx.setTextBaseline('ideographic');
      ctx.fillText("Ideographic Q", 20, y);
      y += 40 + pad;

      ctx.moveTo(20,y);
      ctx.lineTo(150, y);
      ctx.stroke();
      ctx.setTextBaseline('top');
      ctx.fillText("Top Q", 20, y);
      y += 40 + pad;

      ctx.moveTo(20,y);
      ctx.lineTo(150, y);
      ctx.stroke();
      ctx.setTextBaseline('bottom');
      ctx.fillText("Bottom Q", 20, y);
      y += 40 + pad;

      ctx.moveTo(20,y);
      ctx.lineTo(150, y);
      ctx.stroke();
      ctx.setTextBaseline('middle');
      ctx.fillText("Middle Q", 20, y);
      y += 40 + pad;

      ctx.moveTo(20,y);
      ctx.lineTo(150, y);
      ctx.stroke();
      ctx.setTextBaseline('hanging');
      ctx.fillText("Hanging Q", 20, y);
      y += 40 + pad;

      ctx.restore();


      pdf.addPage();
      y=0;
      //
      // rectangles
      //
      ctx.save();
      ctx.fillText("Testing fillRect and strokeRect", 20, y + textHeight);
      y += textHeight + pad;

      ctx.fillRect(20, y, 20, h);
      y += h + pad;

      ctx.setFillStyle('#f5f5f5');
      ctx.fillRect(20, y, 20, h);
      y += h + pad;

      ctx.strokeRect(20, y, 20, h);
      y += h + pad;
      ctx.restore();

      //
      // lines
      //
      // line caps

      ctx.save();
      ctx.fillText("Testing lineCap", 20, y + textHeight);
      y += textHeight + pad;
      ctx.setLineWidth(5);
      ctx.setLineCap('butt');
      ctx.moveTo(20, y);
      ctx.lineTo(200, y);
      ctx.stroke();
      y += pad;
      ctx.setLineCap('round');
      ctx.moveTo(20, y);
      ctx.lineTo(200, y);
      ctx.stroke();
      y += pad;
      ctx.setLineCap('square');
      ctx.moveTo(20, y);
      ctx.lineTo(200, y);
      ctx.stroke();
      y += pad;
      ctx.restore();

       // line joins
      ctx.save();
      ctx.fillText("Testing lineJoin", 20, y + textHeight);
      y += textHeight + pad;
      ctx.setLineWidth(10);
      ctx.setLineJoin('miter');
      ctx.moveTo(20, y);
      ctx.lineTo(200, y);
      ctx.lineTo(250, y + 50);
      ctx.stroke();
      y += pad + 10;
      ctx.setLineJoin('bevel');
      ctx.moveTo(20, y);
      ctx.lineTo(200, y);
      ctx.lineTo(250, y + 50);
      ctx.stroke();
      y += pad + 10;
      ctx.setLineJoin('round');
      ctx.moveTo(20, y);
      ctx.lineTo(200, y);
      ctx.lineTo(250, y + 50);
      ctx.stroke();
      y += pad + 10;
      y += 50;
      ctx.restore();

      ctx.fillText("Testing moveTo, lineTo, stroke, and fill", 20, y + textHeight);
      y += textHeight + pad;

      // diamond
      ctx.moveTo(30, y);
      ctx.lineTo(50, y + 20);
      ctx.lineTo(30, y + 40);
      ctx.lineTo(10, y + 20);
      ctx.lineTo(30, y);
      ctx.stroke();
      y += 50;

      // diamond
      ctx.moveTo(30, y);
      ctx.lineTo(50, y + 20);
      ctx.lineTo(30, y + 40);
      ctx.lineTo(10, y + 20);
      ctx.lineTo(30, y);
      ctx.closePath();
      ctx.fill();
      y += 50;


      //
      // arcs
      //
      pdf.addPage();
      y=0;
      ctx.fillText("Testing arc, stroke, and fill", 20, y + textHeight);
      y += textHeight + pad + 20;

      ctx.arc(50, y, 20, -10, 170, false);
      ctx.stroke();
      y +=  pad + 40;

      ctx.arc(50, y, 20, -10, 170, true);
      ctx.stroke();
      y +=  pad + 40;

      ctx.arc(50, y, 20, 0, Math.PI, false);
      ctx.stroke();
      y +=  pad + 40;

      ctx.arc(50, y, 20, 0, Math.PI, true);
      ctx.stroke();
      y +=  pad + 40;

      ctx.arc(50, y, 20, 0, 2*Math.PI, false);
      ctx.stroke();
      y +=  pad + 40;

      ctx.arc(50, y, 20, 0, 2*Math.PI, false);
      ctx.fill();
      y +=  pad + 40;

      ctx.arc(50, y, 20, 0, Math.PI, false);
      ctx.fill();
      y +=  pad + 40;

      pdf.addPage();
      y=0;
      // fill and stroke styles
      ctx.fillText("Testing fillStyle and strokeStyle", 20, y + textHeight);
      y += textHeight + pad;

      // test fill style
      ctx.setFillStyle('#ff0000');
      ctx.fillRect(20, y, 20, h);
      y += h + pad;

      ctx.setFillStyle('#00ff00');
      ctx.fillRect(20, y, 20, h);
      y += h + pad;

      ctx.setFillStyle('#0000ff');
      ctx.fillRect(20, y, 20, h);
      y += h + pad;

       // test stroke style
      ctx.setStrokeStyle('#ff0000');
      ctx.strokeRect(20, y, 20, h);
      y += h + pad;

      ctx.setStrokeStyle('#00ff00');
      ctx.strokeRect(20, y, 20, h);
      y += h + pad;

      ctx.setStrokeStyle('#0000ff');
      ctx.strokeRect(20, y, 20, h);
      y += h + pad;

      ctx.setStrokeStyle('#000000');
      ctx.setFillStyle('#000000');


      // test save and restore (should be red and large)
      ctx.save();
      ctx.setFillStyle('#ff0000');
      ctx.setStrokeStyle('#ff0000');
      ctx.save();
      ctx.setFillStyle('#0000ff');
      ctx.setStrokeStyle('#0000ff');
      ctx.setFont("10pt courier");
      ctx.restore();

      ctx.fillText("Testing save and restore (Should be red and large)", 20, y + textHeight);
      y += textHeight + pad;

      ctx.fillRect(20, y, 20, h);
      y += textHeight + pad;
      ctx.strokeRect(20, y, 20, h);
      y += textHeight + pad;
      ctx.fillText('Hello PDF', 20, y + textHeight);
      y += textHeight + pad;

      ctx.restore();

      //

      pdf.addPage();
      y = pad;
      ctx.fillText("Testing bezierCurveTo", 20, y + textHeight);
      y += textHeight + pad;

      ctx.save();
  	ctx.lineWidth = 6;
  	ctx.strokeStyle = "#333";
  	ctx.beginPath();
  	ctx.moveTo(100, y);
  	ctx.bezierCurveTo(150, y+100, 350, y+100, 400, y);
  	ctx.stroke();
  	ctx.restore();

      y += 100 + pad;
      ctx.save();
      ctx.lineWidth = 6;
      ctx.strokeStyle = "#333";
      ctx.beginPath();
      ctx.moveTo(100, y);
      ctx.bezierCurveTo(150, y+100, 350, y+100, 400, y);
      ctx.fill();
      ctx.restore();

      y += 100 + pad;
  	ctx.fillText("Testing quadraticCurveTo", 20, y + textHeight);
      y += textHeight + pad;
      ctx.save();
      ctx.lineWidth = 6;
      ctx.strokeStyle = "#333";
      ctx.beginPath();
      ctx.moveTo(100, y);
      ctx.quadraticCurveTo(250, y+100, 400, y);
      ctx.stroke();
      ctx.restore();

      y += 100 + pad;
      ctx.save();
      ctx.lineWidth = 6;
      ctx.strokeStyle = "#333";
      ctx.beginPath();
      ctx.moveTo(100, y);
      ctx.quadraticCurveTo(250, y+100, 400, y);
      ctx.fill();
      ctx.restore();


      pdf.addPage();
      y=0;
      //
      // image
      //
      var imgData = '';
      ctx.fillText("Testing drawImage", 20, y + textHeight);
      y += textHeight + pad;
      ctx.drawImage(imgData, 20, y, 50, 50);
      y += 50 + pad;
      ctx.drawImage(imgData, 20, y, 200, 200);
      y += 200 + pad;
      ctx.drawImage(imgData, 20, y);
      y += 200 + pad;


      pdf_test_harness_init(pdf);


  </script>
</body>
</html>
